<template>
    <div class="gate-item-list">
        <div class="detail">
            <div class="lft" @click="isShow = !isShow">
                <Icons :type="isShow ? 'down' :'right'"></Icons>{{msg.prjName || ''}}---{{msg.online == 0 ? '离线' : '在线'}}
            </div>
            <div class="rgt">
                <a href="javascript:;" @click="goEditer" v-if="false">编辑</a>
                <span class="split" v-if="false"></span>
                <Poptip
                    confirm
                    title="您确定要删除该闸机么？"
                    @on-ok="deletes"
                    >
                    <a href="javascript:;" v-if="false">删除</a>
                </Poptip>
                
            </div>
        </div>
        <div class="show-company" v-if="isShow">
            <span class="tis"> 名称：</span> {{msg.name || ''}}
            <span class="tis">设备序列号：</span>
             {{msg.serial}}  
            <span class="tis">设备秘钥：</span>{{msg.secret}}
            <span class="tis">项目编号：</span>{{msg.prjNo}}
            <span class="tis">更新时间：</span>{{msg.updatedAt}}
            
        </div>
    </div>
</template>
<script>
export default {
    name: 'gateBrakeItemList',
    props: {
        msg: {
            type: Object
        }
    },
    data () {
        return {
            isShow: false
        }
    },
    methods: {
        deletes () {
        },
        goEditer () {
        }
    }
}
</script>
<style lang="less" scoped>
.gate-item-list {
    overflow: hidden;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    font-size: 0;
    .detail {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        height: 60px;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        font-size: 14px;
        color: #333;
        .lft {
            cursor: pointer;
            i {
                font-size: 14px;
            }
        }
        .rgt {
            display: flex;
            align-items: center;
            .split {
                display: inline-block;
                width: 1px;
                height: 16px;
                background: #aaa;
                margin: 0 10px;
            }
        }
    }
    .show-company {
        box-sizing: border-box;
        height: 60px;
        line-height: 59px;
        padding: 0 20px;
        font-size: 14px;
        color: #333;
        border-top: 1px solid #ddd;
        .tis {
            margin-left: 10px;
            color: #333;
            font-weight: 600;
        }
    }
}
</style>